@import compass/css3

// VARIABLES
$gridGutter: 10px
$gridColumnWidth: 87px
$gridColumns: 10

$lineHeight: 22px

$background: #9215f2

// RESET
body, ul, li, dl, dt, dd, h1, h2, p, input
    margin: 0
    padding: 0
    font-family: Helvetica
    font-size: 100%
    line-height: $lineHeight

img
    border: none

// TAGS
body
    color: #fff
    background: $background fixed // Fixed to stretch the gradient to the bottom
    +background-image(linear-gradient(#D593FF 0, #8F19EF 165px, $background 100%))

a
    color: #d0a3f7
    text-decoration: none

    &:hover
        text-decoration: underline

input
    border: 1px solid #603382
    border-radius: 10px
    background: #B35EF3

label,
[type = "submit"]
    cursor: pointer

// TYPOGRAPHY
.code
    font-family: Consolas, monospace

// LAYOUT
.clearfix::after
    display: table
    content: " "
    clear: both

// LISTS
.unstyled
    list-style: none

.styled
    @extend .unstyled

    li
        background: url(../../images/li-dot.png) 0 4px no-repeat
        padding-left: 20px + $gridGutter

.inline
    @extend .clearfix
    @extend .unstyled

    & > li
        float: left

        &:not(:last-child)
            margin-right: $lineHeight / 2

.dl-inline
    dt
        float: left
        text-align: right
        width: $gridColumnWidth - $gridGutter

    dd
        margin-left: $gridColumnWidth

// GRID
.row
    @extend .clearfix
    margin-left: -$gridGutter

.span
    float: left
    margin-left: $gridGutter

=getSpanWidth($i)
    width: $i * $gridColumnWidth + ($i -  1) * $gridGutter

@for $i from 1 through $gridColumns - 1
    .span#{$i}
        @extend .span
        +getSpanWidth($i)

.container
    +getSpanWidth($gridColumns)
    margin: 2 * $gridGutter auto $gridGutter

// BOXES
.box
    margin-bottom: $gridGutter
    padding: $lineHeight / 2
    border: 1px solid #222
    border-radius: 10px

.box h1,
.box h2,
.box p:not(:last-child)
    margin-bottom: $lineHeight / 3

.box footer
    text-align: right

.box-white
    background: #fff

    &,
    a
        color: #000

// FORMS
.form
    &,
    dl
        margin-bottom: $lineHeight / 2

.form-horizontal
    @extend .dl-inline
    @extend .form

.btn
    @extend input
    border-top-color: #fff
    border-left-color: #fff
    padding: 5px 10px
    font-weight: bold
    color: #fff

// MENUS
.menu
    a
        color: #fff

    &,
    & ul
        @extend .box

    ul
        @extend .box-white
        @extend .unstyled
        position: absolute
        display: none

    li:hover ul
        display: block

    ul li:not(:last-child)
        margin-bottom: $lineHeight / 2

.menu-horizontal
    @extend .inline
    @extend .menu

// SITE
.global-header
    img
        margin-top: $gridGutter

.global-footer
    text-align: center